<template>
    <div class="InfoForm">


        <div class="FormBox">
            <h1>更新你的健康信息！</h1>
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                class="demo-ruleForm">
                <!-- 身高输入 -->
                <el-form-item label="身高" prop="height">
                    <el-input v-model.trim.number="ruleForm.height" class="inpu" placeholder="请输入你的身高ouo"
                        autocomplete="off" required />
                </el-form-item>
                <br>
                <!-- 体重输入 -->
                <el-form-item label="体重" prop="weight">
                    <el-input v-model.trim.number="ruleForm.weight" class="inpu" placeholder="请输入你的体重awa" required />
                </el-form-item>
                <br>
                <!-- 年龄输入 -->
                <el-form-item label="年龄" prop="age">
                    <el-input v-model.trim.number="ruleForm.age" class="inpu" placeholder="请输入你的年龄\(^o^)/~" required />
                </el-form-item>
                <br>
                <!-- 疾病输入 -->
                <el-form-item label="疾病史" prop="disease">
                    <el-input v-model.trim="ruleForm.disease" class="inpu" type="textarea" placeholder="如果你有病...."
                        autosize show-word-limit maxlength="300" minlength="0" resize="none" />
                </el-form-item>
                <br>
                <!-- 饮食偏好选择 -->
                <el-form-item label="饮食偏好">
                    <el-select v-model="ruleForm.preferValue" class="inpu" placeholder="选择你的饮食偏好" required>
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 提交按钮 -->
                <el-form-item>
                    <el-button @click="submitForm(ruleFormRef)">确定</el-button>
                </el-form-item>

            </el-form>

        </div>

    </div>


</template>

<script setup lang="ts">
import axios from 'axios'
import { reactive, ref, toRef } from 'vue'
import { ElMessage, valueEquals, type FormInstance, type FormRules, ElMessageBox } from 'element-plus'
import { useFormLabelWidth } from 'element-plus/es/components/form/src/utils.mjs'
// 身高输入的校验(小于300/cm)
const checkHeight = (rule: any, value: any, callback: any) => {
    if (!value) {
        callback(new Error('请输入身高qwq/cm'))
    }
    setTimeout(() => {
        if (!Number.isInteger(value)) {
            callback(new Error('请输入整数qwq'))
        } else {
            if (value > 300) {
                callback(new Error('输入的身高有误！'))
            } else {
                callback()
            }
        }
    }, 0)
}
// 体重输入的校验(小于500/kg)
const checkWeight = (rule: any, value: any, callback: any) => {
    if (!value) {
        callback(new Error('请输入体重qwq/kg'))
    }
    setTimeout(() => {
        if (!Number.isInteger(value)) {
            callback(new Error('请输入整数qwq'))
        } else {
            if (value > 500) {
                callback(new Error('输入的体重有误！'))
            } else {
                callback()
            }
        }
    }, 0)

}
// 年龄输入的校验(小于120/岁)
const checkAge = (rule: any, value: any, callback: any) => {
    if (!value) {
        callback(new Error('请输入年龄qwq'))
    }
    setTimeout(() => {
        if (!Number.isInteger(value)) {
            callback(new Error('请输入整数qwq'))
        } else {
            if (value > 120) {
                callback(new Error('输入的年龄有误！'))
            } else {
                callback()
            }
        }
    }, 0)
}
// 偏好选择的校验(不需要用到)
const checkPreferValue = (rule: any, value: any, callback: any) => {
    if (!value) {
        callback(new Error('请选择qwq'))
    }
    // setTimeout(() => {
    //     if (!Number.isInteger(value)) {
    //         callback(new Error('请输入整数qwq'))
    //     } else {
    //         if (value > 120) {
    //             callback(new Error('输入的年龄有误！'))
    //         } else {
    //             callback()
    //         }
    //     }
    // }, 1000)
}
// 表单数据的接口
interface RuleForm {
    height: string,
    weight: string,
    age: string,
    disease: string,
    preferValue: string,
}
// 表单数据的对象
const ruleForm: RuleForm = reactive({
    height: '',
    weight: '',
    age: '',
    disease: '',
    preferValue: '',
})
// 表单校验规则
const rules = reactive<FormRules<typeof ruleForm>>({
    height: [{ validator: checkHeight, trigger: 'blur' }],
    weight: [{ validator: checkWeight, trigger: 'blur' }],
    age: [{ validator: checkAge, trigger: 'blur' }],
    disease: [{ validator: undefined, trigger: 'blur' }],
    preferValue: [{ validator: checkPreferValue, trigger: 'change' }],
})


// const submitForm = (formEl:FormInstance | undefined)=>{
//     if (!formEl) return
//   formEl.validate((valid) =>{
//     if (valid) {
//       console.log('submit!')
//     } else {
//       console.log('error submit!')
//       return false
//     }
//   })
// }

// 偏好选择的枚举
const options = [
    {
        label: '清淡',
        value: 1,
    },
    {
        label: '麻辣',
        value: 2,
    },

    {
        label: '酸甜',
        value: 3,
    }
]
const ruleFormRef = ref<FormInstance>()
let formAxios: any
let updateAxios: any
// 提交按钮功能的实现
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    // 表单数据未填完则返回

    // 第一次点确定按钮的提示框确定，校验失败会返回
    ElMessageBox.confirm('请确认你的健康信息!ouo',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        // 当校验成功时，执行提交逻辑
        formEl.validate(async (valid) => {
            if (valid) {
                try {
                    let RealDisease = ruleForm.disease
                    if (!ruleForm.disease) {
                        RealDisease = '无'
                    }
                    //当疾病史为空时给后端传“无”,然后将Json传给后端
                    let JsonObj = reactive({
                        age: ruleForm.age,
                        diseases: RealDisease,
                        flavor: ruleForm.preferValue,
                        height: ruleForm.height,
                        weight: ruleForm.weight,
                    })
                    console.log(ruleForm.preferValue)
                    //执行表单axios传数据给后端
                    formAxios = await axios({
                        url: '/api/healthInfo/storeHealthInfo',
                        method: 'post',
                        data: JSON.stringify(JsonObj),
                        headers: { 'Content-Type': 'application/json' }
                    })
                    //更新用户登录状态
                    updateAxios = await axios({
                        url: '/api/user/updateStatus',
                        method: 'post',
                        headers: { 'content-type': 'application/x-www-form-urlencoded' }

                    })
                    //提交后弹出成功的提示
                    ElMessage({
                        type: 'success',
                        message: '更新健康信息成功!'
                    })

                    router.push({
                        path: '/layout'
                    })
                } catch (error) {
                    console.log(error);
                }

            } else {
                ElMessage.error('请确认你的输入是否有误!o(╥﹏╥)o')
                //当输入出现问题时返回
            }
        })

    })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消!'
            })
        })



}

import { useRouter } from 'vue-router';
import router from '../../router/index';






</script>

<style scoped>
.InfoForm {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFF9F0;
  overflow: hidden;
}

.FormBox {
  width: 100%;
  max-width: 800px;
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

h1 {
  color: #FF6B35;
  margin-bottom: 32px;
  font-size: 28px;
  font-weight: 600;
}

.demo-ruleForm {
  padding: 0 20px;
}

.el-form-item {
  margin-bottom: 24px;
}

.inpu {
  width: 100%;
  transition: all 0.3s ease;
}

.inpu:hover {
  border-color: #FF6B35;
}

.el-button {
  width: 120px;
  height: 40px;
  background-color: #FF6B35;
  border-color: #FF6B35;
  color: white;
  transition: all 0.3s ease;
}

.el-button:hover {
  background-color: #FF8C42;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255,107,53,0.3);
}

@media (max-width: 768px) {
  .FormBox {
    padding: 24px;
  }
  
  h1 {
    font-size: 24px;
  }
}
</style>
